<template>
    <div class="main">
        <Content>
            <template #content>
                <div class="p-20-30 b-w">
                    <div class="list">
                        <div class="item dispaly" v-for="(item, index) in state.productList" :key="index">
                            <div class="cover">
                                <img :src="item.image">
                            </div>
                            <div class="desc dispaly-column-between">
                                <div>
                                    <div class="title">{{ item.name }}</div>
                                    <div class="label  dispaly-center">
                                        <div v-for="(labelItem, labelIndex) in item.tagList" :key="labelIndex"
                                            class="label-name">{{ labelItem }}</div>
                                    </div>
                                    <div class="price">
                                        <span>¥</span>
                                        {{ item.price }}
                                    </div>
                                    <div class="spac dispaly-center">
                                        <div class="title">规格选择</div>
                                        <div class="spac-list pointer">
                                            <!-- @click="specSelect(item, specItem, specIndex, index)"
                                            v-for="(specItem, specIndex) in item.spac" :key="specIndex" -->
                                            <!-- :class="{ 'active': specItem.isSelect }" -->
                                            <div class="spec-item active dispaly-align-center">{{ item.spName }}</div>
                                        </div>
                                    </div>
                                    <div class="spac dispaly-center">
                                        <div class="title">数量选择</div>
                                        <div>
                                            <el-input-number @change="changeNumber($event, item, index)" size="large"
                                                v-model="item.number" :min="1" />
                                        </div>
                                    </div>
                                </div>
                                <div class="total">¥{{ item.totalPrice }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="result pointer" @click="submit">
                        <div class="text">￥{{ state.totalPrice }}结算</div>
                    </div>
                </div>
            </template>
        </Content>
        <Pop />
    </div>
</template>

<script setup>
import { reactive, onMounted, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const state = reactive({
    productList: [],
    totalPrice: 0,
    submitData: {},
    productList: []
})

// 获取query参数
const route = useRoute()
const getQuery = () => {
    state.submitData = JSON.parse(route.query.data)
    console.log(state.submitData, 'ssss')
    state.productList = state.submitData.productList
    state.productList.forEach(item => {
        item.tagList = item.targets ? item.targets.split(',') : ''
        item.number = 0
        item.image = item.imgs.split(',')[0]
        item.totalPrice = item.price
    })
}

onMounted(() => {
    initMoney()
    getQuery()
})

// 初始化价钱
const initMoney = () => {
    state.productList.forEach(item => item.totalPrice = item.spac[0].price)
    // state.productList.forEach(item => item.price = item.spac[0].price)
}

// 规格选择
/**
 * 
 * @param listItem 整个列表的item
 * @param specItem 选中规格的item
 * @param specIndex 选中规格的index
 * @param listIndex 整个列表的index
 */
let specIitemData = ref({})
const specSelect = (listItem, specItem, specIndex, listIndex) => {
    specIitemData.value = listItem.spac[specIndex]
    state.productList[listIndex].spac.forEach((data, idx) => {
        data.isSelect = idx === specIndex
        if (data.isSelect) {
            listItem.totalPrice = listItem.num * data.price
        }
    });
}

// 改变商品数量
const changeNumber = (number, item, index) => {
    // if (JSON.stringify(specIitemData.value) == '{}') {
    //     specIitemData.value = state.productList[index].spac[0]
    // }
    item.totalPrice = number * item.price
}

// 计算总价
watch(() => state.submitData, (_newValue, _oldValue) => {
    // specIitemData.value = {}
    // let price = ref(0)
    // state.productList.forEach(item => price.value += item.totalPrice)
    // state.totalPrice = price.value.toFixed(2)

    let price = ref(0)
    state.productList.forEach(item => price.value += item.totalPrice)
    state.totalPrice = price.value.toFixed(2)
}, { deep: true, immediate: true })

// 生成提交数据
const generateSubmitData = () => {
    return new Promise((resolve, reject) => {
        if (state.productList.length) {
            let data = state.productList.map(item => {
                return {
                    specName: item.spac.filter(spec => spec.isSelect)[0].name,
                    specId: item.spac.filter(spec => spec.isSelect)[0].id,
                    number: item.num,
                    totalPrice: item.totalPrice,
                    productName: item.name,
                    cover: item.cover,
                    price: item.price
                }
            })
            resolve(data)
        } else {
            reject('error')
        }
    })
}

// 结算
const router = useRouter()
const submit = async () => {
    const { ancestralId, id, productList } = state.submitData
    state.submitData.totalPrice = state.totalPrice
    localStorage.setItem('orderPro', JSON.stringify(state.submitData))
    console.log(state.submitData, 'ssss')
    let submitData = {
        ancestralId: ancestralId ? ancestralId : id,
        tabletId: ancestralId ? id : null,
    }
    const orderGoodsList = productList.map(item => {
        return {
            goodsId: item.id,
            goodsNum: item.number
        }
    })
    submitData.orderGoodsList = orderGoodsList
    router.push({
        path: '/submit',
        query: {
            data: JSON.stringify(submitData)
        },
    })
}
</script>

<style lang="scss" scoped>
.active {
    border: 1px solid $primary-color !important;
}

.main {
    .result {
        display: flex;
        justify-content: flex-end;
        padding: 30px 0 30px 0;


        .text {
            width: 250px;
            height: 46px;
            border-radius: 4px;
            text-align: center;
            line-height: 46px;
            font-family: MicrosoftYaHei;
            font-size: 20px;
            color: #EDE7DB;
            background-color: $primary-color;
        }
    }

    .list {
        overflow-y: scroll;
        max-height: 880px;

        .item:first-child {
            padding-top: 0;
        }

        .item {
            padding: 30px 0;
            border-bottom: 2px solid #EDE7DB;

            .cover {
                margin-right: 24px;
                flex: 1;
                width: 400px;
                height: 400px;

                img {
                    width: 400px;
                    height: 400px;
                }
            }

            .desc {
                flex: 3;

                .title {
                    font-family: MicrosoftYaHei, MicrosoftYaHei;
                    font-weight: bold;
                    font-size: 20px;
                    color: #000000;
                }

                .label {
                    margin: 18px 0 20px 0;

                    .label-name {
                        background-color: $primary-color;
                        padding: 4px 6px;
                        font-family: MicrosoftYaHei;
                        font-size: 12px;
                        color: #FFFFFF;
                        border-radius: 2px;
                        margin-right: 6px;
                    }
                }

                .price {
                    padding: 10px 24px;
                    background: #EDE7DB;
                    border-radius: 5px;
                    font-family: MicrosoftYaHei, MicrosoftYaHei;
                    font-weight: bold;
                    font-size: 36px;
                    color: $primary-color;

                    span {
                        font-family: MicrosoftYaHei;
                        font-size: 20px;
                        color: $primary-color;
                    }
                }

                .total {
                    width: 250px;
                    height: 46px;
                    background: $primary-color;
                    line-height: 46px;
                    text-align: center;
                    border-radius: 4px;
                    font-family: MicrosoftYaHei;
                    font-size: 20px;
                    color: #EDE7DB;
                }

                .spac {
                    .title {
                        margin-right: 20px;
                        font-family: MicrosoftYaHei;
                        font-size: 14px;
                        color: #777777;
                    }

                    .spac-list {
                        margin: 26px 0;

                        .spec-item {
                            font-family: MicrosoftYaHei;
                            font-size: 18px;
                            color: #111111;
                            border: 1px solid #CCCCCC;
                            padding: 11px 34px;
                            margin-right: 8px;
                        }
                    }
                }
            }
        }
    }
}
</style>